<template>
	<view class="trimDetailed">
		<view class="checkBox">
			<view class="check">
				<view class="checkbox__1">查看合同总表</view>
				<view class="checkbox__2 flex-row">
					<view class="uni-list-cell-db">
						<picker mode="date" :value="Startdate" @change="bindDateChangeStart">
							<view class="uni-input flex-row">
								<text>{{Startdate}}</text>
								<image src="../../../static/images/bottom.png" mode="" />
							</view>
						</picker>
					</view>
					<text class="center-line"> </text>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="Enddate" @change="bindDateChangeEnd">
							<view class="uni-input flex-row">
								<text>{{Enddate}}</text>
								<image src="../../../static/images/bottom.png" mode="" />
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<view class="tableView">
			<view class="tableView_title">
				<view class="flex-row tableView_title_tab">
					<view @click="clickBut(0)" :class="this.button==0 ?'onButtons ': ''"><text>全部</text></view>
					<view @click="clickBut(1)" :class="this.button==1 ?'onButtons': ''"><text>工单</text></view>
					<view @click="clickBut(2)" :class="this.button==2 ?'onButtons': ''"><text>自营</text></view>
					<view @click="clickBut(3)" :class="this.button==3 ?'onButtons': ''"><text>其他</text></view>
				</view>
				<!-- 全部 -->
				<view v-if="button == 0">
					<view class="tableView_title_line"></view>
					<view class="uni-container">
						<uni-table ref="table" border stripe emptyText="暂无更多数据">
							<!-- 表格标题 -->
							<uni-tr>
								<uni-th width="50" align="center">序号</uni-th>
								<uni-th width="80" align="center">合同名称</uni-th>
								<uni-th align="center">原合同额</uni-th>
								<uni-th align="center">已支付</uni-th>
								<uni-th align="center">未支付</uni-th>
								<uni-th align="center">增项合同项</uni-th>
								<uni-th align="center">结算合同额</uni-th>
							</uni-tr>
							<!-- 表格内容 -->
							<uni-tr v-for="(item, index) in tableData0" :key="index">
								<uni-td align="center">{{ index+1 }}</uni-td>
								<uni-td>
									<view align="center">{{ item.name }}</view>
								</uni-td>
								<uni-td align="center">{{ item.originalAccount }}</uni-td>
								<uni-td align="center">{{item.paidAmount }}</uni-td>
								<uni-td align="center">{{item.outstandingAmount }}</uni-td>
								<uni-td align="center">{{item.additionAmount }}</uni-td>
								<uni-td align="center">{{item.totalAmount }}</uni-td>

							</uni-tr>
							<!-- 总计 -->
							<uni-th width="60" align="right">合计</uni-th>
							<uni-th width="50" align="left">(万元)</uni-th>
							<uni-th width="80" align="center">{{this.originalAccountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.paidAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.outstandingAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.additionAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.totalAmountTotal}}</uni-th>

						</uni-table>

					</view>
				</view>

				<!-- 工单 -->
				<view v-else-if="button == 1">
					<view class="tableView_title_line2"></view>
					<view class="uni-container">
						<uni-table ref="table" border stripe emptyText="暂无更多数据">
							<!-- 表格标题 -->
							<uni-tr>
								<uni-th width="50" align="center">序号</uni-th>
								<uni-th width="80" align="center">合同名称</uni-th>
								<uni-th align="center">原合同额</uni-th>
								<uni-th align="center">已支付</uni-th>
								<uni-th align="center">未支付</uni-th>
								<uni-th align="center">增项合同项</uni-th>
								<uni-th align="center">结算合同额</uni-th>
							</uni-tr>
							<!-- 表格内容 -->
							<uni-tr v-for="(item, index) in tableData1" :key="index">
								<uni-td align="center">{{ index+1 }}</uni-td>
								<uni-td>
									<view align="center">{{ item.name }}</view>
								</uni-td>
								<uni-td align="center">{{ item.originalAccount }}</uni-td>
								<uni-td align="center">{{item.paidAmount }}</uni-td>
								<uni-td align="center">{{item.outstandingAmount }}</uni-td>
								<uni-td align="center">{{item.additionAmount }}</uni-td>
								<uni-td align="center">{{item.totalAmount }}</uni-td>

							</uni-tr>
							<!-- 总计 -->
							<uni-th width="60" align="right">合计</uni-th>
							<uni-th width="50" align="left">(万元)</uni-th>
							<uni-th width="80" align="center">{{this.originalAccountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.paidAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.outstandingAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.additionAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.totalAmountTotal}}</uni-th>
						</uni-table>
					</view>
				</view>
				<!-- 自营 -->
				<view v-else-if="button == 2">
					<view class="tableView_title_line3"></view>
					<view class="uni-container">
						<uni-table ref="table" border stripe emptyText="暂无更多数据">
							<!-- 表格标题 -->
							<uni-tr>
								<uni-th width="50" align="center">序号</uni-th>
								<uni-th width="80" align="center">合同名称</uni-th>
								<uni-th align="center">原合同额</uni-th>
								<uni-th align="center">已支付</uni-th>
								<uni-th align="center">未支付</uni-th>
								<uni-th align="center">增项合同项</uni-th>
								<uni-th align="center">结算合同额</uni-th>
							</uni-tr>
							<!-- 表格内容 -->
							<uni-tr v-for="(item, index) in tableData2" :key="index">
								<uni-td align="center">{{ index+1 }}</uni-td>
								<uni-td>
									<view align="center">{{ item.name }}</view>
								</uni-td>
								<uni-td align="center">{{ item.originalAccount }}</uni-td>
								<uni-td align="center">{{item.paidAmount }}</uni-td>
								<uni-td align="center">{{item.outstandingAmount }}</uni-td>
								<uni-td align="center">{{item.additionAmount }}</uni-td>
								<uni-td align="center">{{item.totalAmount }}</uni-td>

							</uni-tr>
							<!-- 总计 -->
							<uni-th width="60" align="right">合计</uni-th>
							<uni-th width="50" align="left">(万元)</uni-th>
							<uni-th width="80" align="center">{{this.originalAccountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.paidAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.outstandingAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.additionAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.totalAmountTotal}}</uni-th>
						</uni-table>
					</view>
				</view>
				<!-- 其他 -->
				<view v-else-if="button == 3">
					<view class="tableView_title_line4"></view>
					<view class="uni-container">
						<uni-table ref="table" border stripe emptyText="暂无更多数据">
							<!-- 表格标题 -->
							<uni-tr>
								<uni-th width="50" align="center">序号</uni-th>
								<uni-th width="80" align="center">合同名称</uni-th>
								<uni-th align="center">原合同额</uni-th>
								<uni-th align="center">已支付</uni-th>
								<uni-th align="center">未支付</uni-th>
								<uni-th align="center">增项合同项</uni-th>
								<uni-th align="center">结算合同额</uni-th>
							</uni-tr>
							<!-- 表格内容 -->
							<uni-tr v-for="(item, index) in tableData3" :key="index">
								<uni-td align="center">{{ index+1 }}</uni-td>
								<uni-td>
									<view align="center">{{ item.name }}</view>
								</uni-td>
								<uni-td align="center">{{ item.originalAccount }}</uni-td>
								<uni-td align="center">{{item.paidAmount }}</uni-td>
								<uni-td align="center">{{item.outstandingAmount }}</uni-td>
								<uni-td align="center">{{item.additionAmount }}</uni-td>
								<uni-td align="center">{{item.totalAmount }}</uni-td>

							</uni-tr>
							<!-- 总计 -->
							<uni-th width="60" align="right">合计</uni-th>
							<uni-th width="50" align="left">(万元)</uni-th>
							<uni-th width="80" align="center">{{this.originalAccountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.paidAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.outstandingAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.additionAmountTotal}}</uni-th>
							<uni-th width="80" align="center">{{this.totalAmountTotal}}</uni-th>
						</uni-table>
					</view>
				</view>
				<view class="line" style="margin-top: -472rpx;"></view>
			</view>
			<!-- <view class="">
				<view class="uni-container">
					<uni-table ref="table" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="50" align="center">序号</uni-th>
							<uni-th width="150" align="center">合同名称</uni-th>
							<uni-th align="center">原合同额</uni-th>
							<uni-th align="center">已支付</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td>{{ index+1 }}</uni-td>
							<uni-td>
								<view class="name">{{ item.name }}</view>
							</uni-td>
							<uni-td align="center">{{ item.address }}</uni-td>

						</uni-tr>
					</uni-table>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				button: 0,
				Enddate: currentDate,
				Startdate: currentDate,

				loading: false,
				tableData: [],
				infotimes: [],
				tableData0: [],
				tableData1: [],
				tableData2: [],
				tableData3: [],
				series: [],



				//总明细-表格
				name: "", //合同名称
				originalAccount: "", //原合同额
				paidAmount: "", //已付金额
				outstandingAmount: "", //未收金额
				additionAmount: "", //合同增项额度
				totalAmount: "", //总合同额

				sum: [],
				originalAccountTotal: "", //原合同总额
				paidAmountTotal: "", //已支付总额
				outstandingAmountTotal: "", //未支付总额
				additionAmountTotal: "", //合同项总额
				totalAmountTotal: "", //总计额度


			}
		},
		onLoad() {
			this.selectedIndexs = []
			this.getData(1)
			this.Startdate = uni.$u.timeFormat(this.Startdate, 'yyyy年-mm月-dd日');
			this.Enddate = uni.$u.timeFormat(this.Enddate, 'yyyy年-mm月-dd日');
			this.button = '';
			this.getDetial();
		},
		created() {
			uni.startPullDownRefresh();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//获取表格信息
			getDetial() {
				this.$http('iWallet.queryForemanAmountBookByType', {
					startDate: this.infotimes[0],
					endDate: this.infotimes[1],
					type: this.button,
				}).then(r => {
					if (r.code == 200) {
						let res = r.data.foremanAmountBookList;

						this.originalAccountTotal = r.data.originalAccountTotal
						this.paidAmountTotal = r.data.paidAmountTotal
						this.outstandingAmountTotal = r.data.outstandingAmountTotal
						this.additionAmountTotal = r.data.additionAmountTotal
						this.totalAmountTotal = r.data.totalAmountTotal

						this.tableData0 = res
						this.tableData1 = res
						this.tableData2 = res
						this.tableData3 = res
						this.sum = r.data
						console.log(res);
						// this.name = r.data.name;
						// this.type = r.data.type;
						// this.originalAccount = r.data.originalAccount;

						// let series = [];
						// res.map(item => {
						// 	series.push({
						// 		name: item.name,//合同名称
						// 		value: item.account,
						// 		labelText: item.typeStr,
						// 	})
						// });

					}
				})
			},
			clickBut(index) {
				console.log(index)
				this.button = index;
				if (index == 0) {
					this.button = '';
					this.getDetial('')
				};
				this.getDetial(index) //带类型id  去请求接口
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				// this.request({
				// 	pageSize: this.pageSize,
				// 	pageCurrent: pageCurrent,
				// 	value: value,
				// 	success: res => {
				// 		// console.log('data', res);
				// 		this.tableData = res.data
				// 		this.total = res.total
				// 		this.loading = false
				// 	}
				// })
			},


			bindDateChangeStart(e) {
				let newTime = e.detail.value;

				let newends = e.detail.value;
				let infotimes = this.infotimes
				newends = newends.split('-').join(''); //格式化传给后端开始时间 
				const arr = [];
				arr.push(newends);
				console.log(arr);
				infotimes.splice(0, 0, arr);
				if (this.infotimes[0]) {
					uni.showToast({
						title: '请选择结束时间',
						icon: "none",
						duration: 900
					})
					infotimes.splice(0, 0, arr)
				} else {
					console.log()
				}

				this.infotimes = arr;
				//初始开始日期数据
				this.Startdate = uni.$u.timeFormat(e.detail.value, 'yyyy年-mm月-dd日');

			},
			bindDateChangeEnd(e) {
				let newend = e.detail.value;

				let newends = e.detail.value;
				let infotimes = this.infotimes
				newends = newends.split('-').join(''); //格式化传给后端结束时间
				const arr = [];
				arr.push(newends);
				console.log(arr);
				infotimes.splice(1, 0, arr); //结束时间放入自定义数组

				//判断输入是否大于开始时间
				if (this.infotimes[1] < this.infotimes[0]) {
					uni.showToast({
						title: '不能小于开始时间',
						icon: "none"
					})
					infotimes.splice(0, 0);
					infotimes.splice(1, 1); //删除时间
				} else {
					infotimes.splice(1, 0, arr);
					this.getDetial()
				}

				//初始结束日期数据
				this.Enddate = uni.$u.timeFormat(e.detail.value, 'yyyy年-mm月-dd日');
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style scoped>
	.checkbox__2  {
		align-items: center;
	}
	.onButtons {
		font-weight: 800;
		color: #000;
	}

	.uni-container {
		margin-left: 30rpx;
		margin-top: 60rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.tableView {
		background-color: #fff;
		width: 100%;
		margin-top: 30rpx;
		border-radius: 28rpx 28rpx 0 0;
	}

	.tableView_title {
		width: 100%;
		height: 80rpx;
	}

	.image_8 {
		margin-left: 11rpx;
		margin-top: 16rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.image_GD {
		margin-left: 32%;
		margin-top: 16rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.image_ZY {
		margin-left: 62%;
		margin-top: 16rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.image_QT {
		margin-left: 92%;
		margin-top: 16rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	/* .line {
		width: 100%;
		height: 1px;
		background-color: #EEEEEE;
		margin-top: 20rpx;
	} */

	.tableView_title_tab {
		line-height: 80rpx;

	}

	.tableView_title_tab text {
		margin: 0 30rpx;
	}

	.tableView_title_line {
		height: 5rpx;
		width: 53%;
		margin-left: 34rpx;
		justify-content: space-between;
	}


	.tableView_title_line {
		width: 55rpx;
		height: 8rpx;
		background-color: #1D6AFF;
		border-radius: 28rpx;
		margin-left: 36rpx;
	}


	.tableView_title_line2 {
		width: 55rpx;
		height: 8rpx;
		background-color: #1D6AFF;
		border-radius: 28rpx;
		margin-left: 160rpx;
	}

	.tableView_title_line3 {
		width: 55rpx;
		height: 8rpx;
		background-color: #1D6AFF;
		border-radius: 28rpx;
		margin-left: 288rpx;
	}

	.tableView_title_line4 {
		width: 55rpx;
		height: 8rpx;
		background-color: #1D6AFF;
		border-radius: 28rpx;
		margin-left: 410rpx;
	}


	page {
		/* background-color: #F6F7F9; */
	}

	.trimDetailed {}

	.checkBox {
		background-color: #F6F7F9;
		width: 100%;
		padding-bottom: 30rpx;
	}

	.check {
		width: 95%;
		margin: 0 auto;

	}

	.checkbox__1 {
		font-weight: 600;
		font-size: 30rpx;
		padding: 20rpx 0;
	}

	.center-line {
		width: 30rpx;
		height: 1px;
		background-color: #999;
		margin: 0 20rpx;
		/* margin-top: 20rpx; */
	}

	.uni-list-cell-db {
		font-size: 26rpx;
		background-color: #fff;
		width: 320rpx;
		text-align: center;
		border-radius: 28rpx;
		height: 60rpx;
		padding: 10rpx 100rpx 0 0;
	}

	.uni-input image {
		width: 25rpx;
		height: 35rpx;
		margin-left: 25rpx;
		padding-top: 10rpx;
	}

	.uni-input text {
		margin-left: 14%;

	}
</style>
